<template>
  <a-modal
    title="修改密码"
    :visible="visible_updPwd"
    :confirm-loading="confirmLoading"
    @ok="handleOkUpdPwd"
    @cancel="handleCancel"
  >
    <a-form :form="formUpdPwd">
      <a-form-item
        label="原密码"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback
      >
        <a-input
          placeholder="请输入原密码"
          type="password"
          v-decorator="['password', {rules: [{required: true, message: '请输入原密码！'}]}]"/>
      </a-form-item>
      <a-form-item
        label="新密码"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback
      >
        <a-input
          placeholder="请输入新密码"
          type="password"
          v-decorator="['newPassword', {rules: [{required: true, message: '请输入新密码！'},{
            validator: validateToNextPassword,
          },]}]"/>
      </a-form-item>
      <a-form-item
        label="重复新密码"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback
      >
        <a-input
          placeholder="请再次输入新密码"
          type="password"
          v-decorator="['confirm', {rules: [{required: true, message: '请再次输入新密码！'},
                                            {
                                              validator: compareToFirstPassword,
                                            }]}]"/>
      </a-form-item>
    </a-form>
  </a-modal>

</template>

<script>
import {sysUserUpdatePwd} from '@/api/modular/system/userManage'

export default {
  data() {
    return {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      confirmLoading: false,
      visible_updPwd: false,
      userId: '',
      formUpdPwd: this.$form.createForm(this)
    }
  },
  methods: {
    open(id) {
      this.userId = id
      this.visible_updPwd = true
    },
    handleOkUpdPwd() {
      const {formUpdPwd: {validateFields}} = this
      validateFields((errors, values) => {
        if (!errors) {
          this.confirmLoading = true
          values.id = this.userId
          sysUserUpdatePwd(values).then((res) => {
            if (res.success) {
              this.$message.success('修改成功')
              this.handleCancel()
            } else {
              this.$message.error('修改失败：' + res.message)
            }
            // eslint-disable-next-line handle-callback-err
          }).finally((err) => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleCancel() {
      this.visible_updPwd = false
    },
    compareToFirstPassword(rule, value, callback) {
      const formUpdPwd = this.formUpdPwd
      if (value && value !== formUpdPwd.getFieldValue('newPassword')) {
        //eslint-disable-next-line standard/no-callback-literal
        callback('请确认两次输入密码的一致性！')
      } else {
        callback()
      }
    },
    validateToNextPassword(rule, value, callback) {
      const formUpdPwd = this.formUpdPwd
      if (value && this.confirmDirty) {
        formUpdPwd.validateFields(['confirm'], {force: true})
      }
      callback()
    }
  }
}
</script>
